import React, { Component } from 'react';
import { Checkbox } from 'antd';
import './index.less';

const data = [{name: "图片", size: "1.2M", checked: false},
			{name: "文件1", size: "5M", checked: false},
			{name: "小视频", size: "3.2M", checked: false},]
class File extends Component {
	
	state={
		
	}
	
	lineClick = (index) => {
		console.log("行触发")
		let list = data;
		list[index].checked = true;
		const fileList = this.renderData(list);
		this.setState({
			fileList
		})
	}
	
	onChange = (e,v,i) => {
		let list = data;
		list[i].checked = e.target.checked;
		const fileList = this.renderData(list);
		this.setState({
			fileList
		})
	}
	
	renderData = (data) => {
		return data.map((item, index) => {
			return <li key={index} className="line" onClick={()=>this.lineClick(index)}>
				<div className={`line-bg ${item.checked ? "line-bg-checked" : ""}`}>
					<Checkbox checked={item.checked} onChange={(e)=>this.onChange(e,item,index)} />
				</div>
				<div className={`line-main ${item.checked ? "line-main-checked" : ""}`}>
					<span>{item.name}</span>
					<span>{item.size}</span>
				</div>
			</li>
		})
	}
	
	UNSAFE_componentWillMount(){
		
	}
	
	componentDidMount(){
		const fileList = this.renderData(data);
		this.setState({fileList})
	}
	
	render(){
		
		return (
			<ul style={{width: "100%"}}>
				{this.state.fileList}
			</ul>
		)
	}
}

export default File;